import QtQuick 1.1
import com.nokia.meego 1.0
import "Utils.js" as Utils
import "Logger.js" as Logger

Page {
  id: feedView
  tools: Toolbar { id: commonTools }
  anchors.fill: parent

  Rectangle {
    id: main
    color: "#ffffff"
    width: parent.width
    height: parent.height

    TopBar { id: topBar }

    FeedViewModel {
      id: listModel
      onLoadingChanged: {
        waitIndicator.show = listModel.loading
        appState.feedModel = listModel
      }
    }

    Component {
      id: listDelegate

      Column {
        id: columnItem
        height: Utils.getMinHeight(rowTitle.height)
        width: main.width
        spacing: 15

        Rectangle {
          id: columnContainer
          height: parent.height
          width: parent.width

          Rectangle {
            id: imageContainer
            width: 74
            height: 74
            anchors.leftMargin: 4
            anchors.topMargin: 4

            Image {
              id: columnImage
              width: 74
              height: 74
              source: "resources/icon_list.png"
              fillMode: Image.PreserveAspectCrop
              smooth: true
              clip: true
            }

            Image {
              id: mask
              width: 74
              height: 74
              source: "resources/overlay.png"
              clip: true
              smooth: true
            }

            Image {
              id: columnImageLoader
              source: Utils.extractImageUrl(model.description)
              visible: false
              onStatusChanged: {
                if (columnImageLoader.status == Image.Ready) {
                  columnImage.source = columnImageLoader.source
                }
              }
            }
          }

          Text {
            id: rowTitle
            text: model.title
            font.pointSize: 16
            color: "#7d2755"
            wrapMode: Text.WordWrap
            textFormat: Text.PlainText
            font.bold: true
            anchors.left: imageContainer.right
            anchors.right: columnContainer.right
            anchors.leftMargin: 15
            anchors.rightMargin: 15
          }

          MouseArea {
            anchors.fill: parent

            onClicked:  {
              posts.currentIndex = index
              appState.currentViewName = "feedItemView"
              appState.cameFromView = "feedView"
              appState.currentIndex = posts.currentIndex
              pageStack.push(feedItemView)
              Logger.log(posts.currentIndex)
            }
          }
        }
      }
    }

    ListView {
      id: posts
      model: listModel
      delegate: listDelegate
      orientation: ListView.Vertical
      boundsBehavior: Flickable.DragOverBounds
      anchors.top: topBar.bottom
      anchors.topMargin: 15
      anchors.bottom: parent.bottom
      anchors.bottomMargin: 10
      anchors.right: parent.right
      anchors.rightMargin: 7
      anchors.left: parent.left
      anchors.leftMargin: 7
      visible: !listModel.loading
    }
  }
}
